<template>
  <page className='app'>
    <div class='block1'>
      <div class='line'>line1</div>
      <a-button type='primary' size='small'>Primary</a-button>

      <a-input v-model:value='value' placeholder='Basic usage' size='small' />

      <a-date-picker />
    </div>

    <div class='table1'>
      <a-table :dataSource='dataSource' :columns='columns' size='small' :pagination='false' >

        <template #headerCell="{ column }">
          <template v-if="column.key === 'name'">
        <span>
          Name
        </span>
          </template>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <a>
              {{ record.name }}
            </a>
          </template>
        </template>

      </a-table>

      <a-pagination
        v-model:current='current'
        v-model:pageSize='pageSize'
        :total='total'
        show-size-changer
        @change='pageChange'
        @showSizeChange='showSizeChange'
      />
    </div>
  </page>

</template>
<script setup lang='ts'>
import { ref, onMounted } from 'vue'

const value = ref('')
const current = ref(1)
const pageSize = ref(10)
const total = ref(100)

const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号'
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号'
  }
]

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address'
  }
]

// 此方法比pageChange先执行，如果有改变的话
const showSizeChange = (page: number, size: number) => {
  console.log(size)
}

const pageChange = (page: number, size: number) => {
  console.log(page, size)
}

onMounted(() => {
  console.log("onMounted")
})


</script>

<style lang='less' scoped>
.app {
  color: red;

  .block1 {
    width: 400px;

    > div {
      margin-bottom: 20px;
    }
  }

  .table1 {
    margin-top: 100px;
  }
}

</style>
